<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"
    />
    <title>19-下拉列表select.html</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
    </style>
  </head>
  <body>
    <select></select>
    <button>选择星期2</button>
    <script>
      /*
      下拉列表
      1 动态渲染该标签
      2 触发事件后 如何获取 选中的值  change
      3 动态设置 它 显示哪个 选项
       */

      const select = document.querySelector("select");
      const button = document.querySelector("button");
      const list = ["星期一", "星期二", "星期三"];
      let html = "<option>-星期-</option>";
      html += list
        .map((item, index) => `<option value="${index + 1}">${item}</option>`)
        .join("");
      select.innerHTML = html;

      select.addEventListener("change", function () {
        // 获取下拉列表选中的值
        console.log(select.value);
      });

      button.addEventListener("click", function (e) {
        select.value = "3";
      });
    </script>
  </body>
</html>
